<template>
    <div class="page-search">
        <van-nav-bar
            left-arrow
            :fixed="true"
            @click-left="$router.back(-1)"
            v-if="!searchUser"
            style="color:#fff;">
            <!--<van-search-->
            <!--:placeholder="$t('m.SearchinShopGoGo')"-->
            <!--slot="title"-->
            <!--v-model="searchTerm"-->
            <!--@search="onSearch"-->
            <!--autofocus-->
            <!--v-focus-->
            <!--style="display: inline-block;width:100%;"-->
            <!--background="#f90"-->
            <!--/>-->
            <div slot="title" class="van-search"
                 style="background: rgb(255, 153, 0); display: inline-block; width: 100%;">
                <i class="van-icon van-icon-search"><!----></i>
                <div class="van-cell van-field">
                    <!--<div class="input-clear" v-if="searchTerm" @click="clearValue"><van-icon name="clear" /></div>-->
                    <input type="search" autofocus v-focus="true" ref="inputs" :placeholder="placeholderText"
                           v-model="searchTerm" @search="onSearch" class="search-input"/>
                </div>
            </div>

            <div class="search-submit-box" slot="right">
                <van-button size="small" class="search-submit" @click="onSearch">{{$t('m.Search')}}</van-button>
            </div>
        </van-nav-bar>
        <van-nav-bar
            left-arrow
            :fixed="true"
            @click-left="$router.back(-1)"
            v-else
            style="color:#fff;">
            <!--<van-search-->
            <!--:placeholder="$t('m.SearchinUsers')"-->
            <!--slot="title"-->
            <!--v-model="searchUserTerm"-->
            <!--@search="onSearchUser"-->
            <!--autofocus-->
            <!--v-focus-->
            <!--style="display: inline-block;width:100%;"-->
            <!--background="#f90"-->
            <!--/>-->
            <div slot="title" class="van-search"
                 style="background: rgb(255, 153, 0); display: inline-block; width: 100%;">
                <i class="van-icon van-icon-search"><!----></i>
                <div class="van-cell van-field">
                    <!--<div class="input-clear" v-if="searchTerm" @click="clearValue"><van-icon name="clear" /></div>-->
                    <input type="search" autofocus v-focus="true" ref="inputs" :placeholder="$t('m.SearchinUsers')"
                           v-model="searchUserTerm" @search="onSearchUser" class="search-input"/>
                </div>
            </div>
            <div class="search-submit-box" slot="right">
                <van-button size="small" class="search-submit" @click="onSearchUser">{{$t('m.Search')}}</van-button>
            </div>
        </van-nav-bar>
        <div style="padding: 23px"></div>
        <!--<input type="text" v-focus="true" ref="inputs" value=""/>-->
        <van-cell-group v-if="!searchUser">
            <van-cell :title="$t('m.Searchproperty')" is-link @click="goToProperty()"/>
            <!--<van-cell :title="$t('m.Searchuser')" is-link  @click="goToSearchUser()"/>-->
        </van-cell-group>
        <!--点击进入search in user 模式-->
        <van-cell-group v-if="!searchUser">
            <van-cell :title="$t('m.Searchuser')" is-link @click="searchUserMode"/>
        </van-cell-group>
        <!--<van-nav-bar class="search-tilte" left-arrow :fixed="true" title="Search" @click-left="$router.back(-1)">-->
        <!--</van-nav-bar>-->
        <!--<div style="padding: 23px;"></div>-->
        <!--<div class="search-box-outside">-->
        <!--<div class="search-box-inside">-->
        <!--<div class="input-clear" v-if="searchTerm" @click="clearValue"><van-icon name="clear" /></div>-->
        <!--<input type="search" placeholder="" v-model="searchTerm" @blur="bl" @focus="fs" @search="onSearch" class="search-input">-->
        <!--</div>-->
        <!--<div class="search-submit-box">-->
        <!--<van-button size="small" class="search-submit" @click="onSearch">Search</van-button>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="radio-box" v-if="categoryId">-->
        <!--<van-radio-group v-model="categoryChecked" @change="categoryChange()">-->
        <!--<van-radio :name="categoryId">{{category}}</van-radio>-->
        <!--<van-radio name="All">All categories</van-radio>-->
        <!--<van-radio name="user">User</van-radio>-->
        <!--</van-radio-group>-->
        <!--</div>-->
        <!--<div class="history">-->
        <!--<div class="history-title">Search history</div>-->
        <!--<div class="history-list">-->
        <!--<div class="list-item">-->
        <!--<div class="go-to-list">-->
        <!--<img src="../../static/img/images/history.png" class="list-icon" />-->
        <!--My Ads-->
        <!--</div>-->

        <!--<div class="go-to-del">-->
        <!--<van-icon name="close" class="del-history"/>-->
        <!--</div>-->

        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--搜索历史-->
        <p class="search-history">{{$t('m.Searchhistory')}}</p>
        <!--Search in Tolymoly 的搜索历史-->
        <div v-if="!searchUser">
            <div class="search-history-box"
                 v-for="(item,index) in gogoHistoryData"
                 :key="index"
                 @click=onSearchByHistory(item)
            >
                <div class="search-history-item">
                    <van-icon name="clock" class="clock"/>
                    <span class="search-content content">{{item}}</span>
                    <van-icon name="close" class="close" @click.stop="deleteHistory(item)"/>
                </div>
            </div>
        </div>
        <!--Search in user 的搜索历史-->
        <div v-else>
            <div class="search-history-box"
                 v-for="(item,index) in userHistoryData"
                 :key="index"
                 @click=onSearchByUser(item)
            >
                <div class="search-history-item">
                    <van-icon name="clock" class="clock"/>
                    <span class="search-content content">{{item}}</span>
                    <van-icon name="close" class="close" @click.stop="deleteUser(item)"/>
                </div>
            </div>
        </div>
        <van-list
            v-model="userLoading"
            :finished="finished"
            loading-text=" "
            @load="getUserList"
            v-show="searchUser"
        >
            <div class="user-info-box" v-for="(item, index) in tableData" :key="index">
                <div class="user-info" @click="goToSellerDetail()">
                    <i class="i-icon1">
                        <img src="" :onerror="defaultHeadImg"/>
                    </i>
                    <div class="info-right-box">
                        <div class="info-left">
                            <p class="title">123</p>
                            <p class="infos">123</p>
                        </div>
                        <div class="info-right">
                            <van-button type="default" size="small" class="following-btn" @click="" v-if="followed">
                                {{$t('m.Following')}}
                            </van-button>
                            <van-button type="default" size="small" class="follow-btn" @click="" v-else>
                                {{$t('m.Follow')}}
                            </van-button>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>
<script>
    import {searchBuyList} from '../../static/api/mgc_api'
    import Qs from 'qs'

    export default {
        name: 'Search',
        data() {
            return {
                defaultHeadImg: 'this.src="' + require('../../static/img/images/user-head.png') + '"',
                searchTerm: '',
                searchUserTerm: '',
                category: '',
                categoryId: '',
                categoryChecked: '',
                searchUser: false,
                userLoading: false,
                finished: true,

                tableData: [],
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                pageInfo: {
                    totalCount: 0,
                    totalPages: 0
                },
                gogoHistoryData: [],
                userHistoryData: [],
                placeholderText: '',
            };
        },
        directives: {
            focus: {
                // 指令的定义
                inserted: function (el, {value}) {
                    // console.log(el,{value})
                    if (value) {
                        el.focus()
                    }
                }
            }
        },
        methods: {
            goToSellerDetail(id) {
                this.$router.push({
                    path: '/user/other-account',
                    query: {
                        userId: id
                    }
                })
            },
            clearValue() {
                this.searchTerm = ''
            },
            categoryChange() {
                console.log(this.categoryChecked, 'this.categoryChecked')
            },
            // goToList() {
            //     // 搜索子段处理
            //     let user = '';
            //     let categoryId = '';
            //     if (this.categoryChecked) {
            //         if (this.categoryChecked === 'user') {
            //             user = this.categoryChecked
            //             this.$router.push({
            //                 path: '/buy-list',
            //                 query: {
            //                     searchTerm: this.searchTerm,
            //                     user: user,
            //                 }
            //             })
            //         } else if (this.categoryChecked === 'All') {
            //             categoryId = ''
            //             this.$router.push({
            //                 path: '/buy-list',
            //                 query: {
            //                     searchTerm: this.searchTerm,
            //                 }
            //             })
            //         } else {
            //             categoryId = this.categoryChecked
            //             this.$router.push({
            //                 path: '/buy-list',
            //                 query: {
            //                     searchTerm: this.searchTerm,
            //                     category: this.category,
            //                     categoryId: categoryId,
            //                 }
            //             })
            //         }
            //     }
            // },
            setSearchHistory(searchTxt, categoryId, categoryName) {

                let searchHistory = localStorage.getItem('searchHistory') || ''

                if (searchHistory) {
                    searchHistory = JSON.parse(searchHistory)

                } else {
                    searchHistory = {
                        "list": []
                    }
                    let obj = {
                        searchTxt: searchTxt,
                        categoryName: categoryName,
                        categoryId: categoryId,
                    }
                    searchHistory.list.push(obj)
                    console.log(searchHistory)
                }
                let _searchHistory = JSON.stringify(searchHistory)
                localStorage.setItem("searchHistory", _searchHistory);
            },
            onSearch() {
                // this.setSearchHistory(this.searchTerm, this.categoryId, this.category)
                // this.goToList()
                let obj = {
                    searchTerm: this.searchTerm
                }
                let query = Object.assign(this.$route.query, obj)
                this.$router.push({
                    path: '/buy-list',
                    query: query
                })
                //把search in Tolymoly的搜索内容存入本地存储 最多20条
                // window.localStorage.removeItem('gogoSearchHistory')
                let val = window.localStorage.getItem('gogoSearchHistory')
                if (val != null) {
                    val = JSON.parse(val)
                    if (this.searchTerm) {
                        //重复的数据不能重复添加 最新搜索的放在最前面
                        let index = val.findIndex((item) => {
                            return item == this.searchTerm
                        })
                        // 如果已经存在 在之前的位置删掉 插入最后面
                        if (index > -1) {
                            val.splice(index, 1)
                            val.push(this.searchTerm)
                        }
                        // 如果不存在 直接插入
                        else {
                            val.push(this.searchTerm)
                        }
                        // 然后判断数组长度
                        if (val.length > 20) {
                            val.shift()
                        }
                        window.localStorage.setItem('gogoSearchHistory', JSON.stringify(val));
                    }
                }
                else {
                    let arr=[]
                    if(this.searchTerm){
                        arr=[this.searchTerm]
                    }
                    window.localStorage.setItem('gogoSearchHistory', JSON.stringify(arr));
                }
            },
            onSearchUser() {
                this.$router.push({
                    path: '/user-list',
                    query: {
                        searchTerm: this.searchUserTerm,
                    }
                })
                //把search in Tolymoly的搜索内容存入本地存储 最多20条
                // window.localStorage.removeItem('gogoSearchHistory')
                let val = window.localStorage.getItem('userSearchHistory')
                if (val != null) {
                    val = JSON.parse(val)
                    if (this.searchUserTerm) {
                        //重复的数据不能重复添加 最新搜索的放在最前面
                        let index = val.findIndex((item) => {
                            return item == this.searchUserTerm
                        })
                        // 如果已经存在 在之前的位置删掉 插入最后面
                        if (index > -1) {
                            val.splice(index, 1)
                            val.push(this.searchUserTerm)
                        }
                        // 如果不存在 直接插入
                        else {
                            val.push(this.searchUserTerm)
                        }
                        // 然后判断数组长度
                        if (val.length > 20) {
                            val.shift()
                        }
                        window.localStorage.setItem('userSearchHistory', JSON.stringify(val));
                    }
                }
                else {
                    let arr=[]
                    if(this.searchTerm){
                        arr=[this.searchTerm]
                    }
                    window.localStorage.setItem('userSearchHistory', JSON.stringify(arr));
                }
            },

            onSearchByHistory(item) {
                this.$router.push({
                    path: '/buy-list',
                    query: {
                        searchTerm: item,
                    }
                })
                //点击的数据置顶
                let val = window.localStorage.getItem('gogoSearchHistory')
                val=JSON.parse(val)
                let index = val.findIndex((i) => {
                    return i === item
                })
                if(index>-1){
                    val.splice(index, 1)
                    val.push(item)
                }
                window.localStorage.setItem('gogoSearchHistory', JSON.stringify(val))
                this.getGoGoHistoryData()
            },
            onSearchByUser(item) {
                this.$router.push({
                    path: '/user-list',
                    query: {
                        searchTerm: item,
                    }
                })
                let val = window.localStorage.getItem('userSearchHistory')
                val=JSON.parse(val)
                let index = val.findIndex((i) => {
                    return i === item
                })
                if(index>-1){
                    val.splice(index, 1)
                    val.push(item)
                }
                window.localStorage.setItem('userSearchHistory', JSON.stringify(val))
                this.getUserHistoryData()

            },

            deleteHistory(delItem) {
                //既然可以删除 则本地存储里一定是有的 就不用加判断了
                let val = window.localStorage.getItem('gogoSearchHistory')
                val=JSON.parse(val)
                let index = val.findIndex((item) => {
                    return item === delItem
                })
                val.splice(index, 1)
                window.localStorage.setItem('gogoSearchHistory', JSON.stringify(val))
                this.getGoGoHistoryData()
            },
            deleteUser(delItem) {
                //既然可以删除 则本地存储里一定是有的 就不用加判断了
                let val = window.localStorage.getItem('userSearchHistory')
                val=JSON.parse(val)
                let index = val.findIndex((item) => {
                    return item === delItem
                })
                val.splice(index, 1)
                window.localStorage.setItem('userSearchHistory', JSON.stringify(val))
                this.getUserHistoryData()
            },

            getGoGoHistoryData() {
                let val = window.localStorage.getItem('gogoSearchHistory')
                if (val) {
                    this.gogoHistoryData=JSON.parse(val).reverse()
                }
                else {
                    this.gogoHistoryData = []
                }
            },
            getUserHistoryData() {
                let val = window.localStorage.getItem('userSearchHistory')
                if (val) {
                    this.userHistoryData=JSON.parse(val).reverse()
                }
                else {
                    this.userHistoryData = []
                }
            },


            goToProperty() {
                location.href = 'https://bestproperty.com.mm/webPhone/index.html';
            },
            goToSearchUser() {
                this.$router.push({
                    path: '/search/search',
                    query: {
                        searchUser: true,
                    }
                })
            },
            getUserList(pageNum) {
                if (pageNum == 1) {
                    this.pageData.pageNum = 1;
                    this.tableData = [];
                }

                let searchForm = {};

                if (this.searchUserTerm) {
                    searchForm.user = 'user'
                    searchForm.searchTerm = this.searchUserTerm
                }
                searchForm.pageNum = this.pageData.pageNum
                searchForm.pageSize = this.pageData.pageSize
                let params = Qs.stringify(searchForm, {arrayFormat: 'repeat'})

                searchBuyList(params).then((res) => {
                    if (res.data.errorID == 0) {
                        let dataList = res.data.object.list || []

                        // // 刷新列表 or 加载更多
                        if (this.pageData.pageNum == 1) {
                            window.scrollTo(0, 0)
                            this.tableData = dataList
                            this.finished = false;
                        } else {
                            this.tableData = this.tableData.concat(dataList)
                        }
                        // console.log(this.tableData, 'this.tableData')
                        // // 分页信息配置
                        this.pageInfo.totalPages = res.data.object.pages
                        this.pageInfo.totalCount = res.data.object.total
                        this.pageData.pageNum = this.pageData.pageNum + 1
                        if (this.pageData.pageNum > this.pageInfo.totalPages) {
                            this.finished = true
                        }
                        this.userLoading = false;
                    } else {
                        this.$toast(res.data.message)
                        this.finished = true
                        this.userLoading = false;
                    }

                }).catch((e) => {
                    this.$toast('No internet, please try again')
                    this.finished = true
                    this.userLoading = false
                })
            },
            searchUserMode() {
                this.searchUser = true
                this.getUserHistoryData()
            },

        },
        mounted() {
            this.getGoGoHistoryData()
            // 有categoryId时才有category(直接跳进来没有categoryId)，categoryId == 'All';--all category categoryId == detail -- 详情页面跳转来的
            // if (this.$route.query.categoryId) {
            //
            //     if (this.$route.query.categoryId === 'detail') {
            //         this.searchTerm = this.$route.query.category || ''
            //     }
            //     if (this.$route.query.categoryId !== 'detail' && this.$route.query.categoryId !== 'all') {
            //         this.category = this.$route.query.category || ''
            //         this.categoryChecked = this.$route.query.categoryId || ''
            //         this.categoryId = this.$route.query.categoryId || ''
            //     }
            //
            // }
            if (this.$route.query.categoryId) {
                this.category = this.$route.query.category
                this.categoryId = this.$route.query.categoryId
            } else {
                this.category = 'Tolymoly'
            }
            if(this.$store.state.store.localLang == 'MM'){
                this.placeholderText = this.category + ' တြင္၀ယ္ယူလိုေသာပစၥည္းမ်ားရွာေဖြပါ'
            } else {
                this.placeholderText = 'Search in ' + this.category
            }
            if (this.$route.query.searchTerm) {
                this.searchTerm = this.$route.query.searchTerm
            }
            if (this.$route.query.searchUser) {
                this.searchUser = this.$route.query.searchUser
            }
            if (this.$route.query.searchUserTerm) {
                this.searchUserTerm = this.$route.query.searchUserTerm
                this.finished = false
            }
            this.$nextTick(() => {
                this.$refs.inputs.focus()
            })
        },
        watch: {
            '$route'(to, from) {
                // console.log(this.$route.query)
                if (this.$route.query) {
                    // 页面跳转进来获取参数

                    if (this.$route.query.searchUser) {
                        this.searchUser = this.$route.query.searchUser
                    } else {
                        this.searchUser = false
                    }

                    if (this.$route.query.searchUserTerm) {
                        this.searchUserTerm = this.$route.query.searchUserTerm
                        this.finished = false
                    } else {
                        this.searchUserTerm = ''
                    }

                    this.tableData = [];
                    this.pageData.pageNum = 1;
                    this.pageInfo.totalCount = 0;
                    this.pageInfo.totalPages = 0;
                }
            },
        }
    }

</script>
<style>
    .page-search .van-nav-bar {
        background-color: #FF9900;
        color: #fff;
    }

    .page-search .van-nav-bar .van-icon {
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }

    .page-search .van-list__loading {
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }

    .page-search .van-search .van-cell {
        border-radius: 0;
    }

    .page-search .van-nav-bar .van-field__control {
        height: 30px;
    }

    .page-search .van-nav-bar .van-icon.van-icon-search {
        color: #999;
    }

    .page-search .van-nav-bar__title {
        height: 100%;
        /*max-width: 70%;*/
        margin-left: 50px;
        margin-right: 90px;
    }

    .page-search .van-search {
        padding: 3px 0;
    }

    .page-search .van-search .van-icon-search {
        left: 10px;
    }

    .page-search .follow-btn.van-button--default {
        background: #fff;
        color: #FF9900;
        border: 1px solid #FF9900;
        margin-top: 8px;
        border-radius: 5px;
    }

    .page-search .following-btn.van-button--default {
        background: #FF9900;
        color: #fff;
        border-width: 0;
        margin-top: 8px;
        border-radius: 5px;
    }
</style>
<style scoped>
    .search-box-outside {
        padding: 10px 4%;
        display: flex;
    }

    .search-box-inside {
        position: relative;
        padding: 5px 30px 5px 10px;
        border: 1px solid #999999;
        width: 65%;
        margin-right: 3%;
    }

    .search-box-inside .input-clear {
        position: absolute;
        right: 3px;
        top: 5px;
    }

    .search-input {
        width: 100%;
        border: 0;
        font-size: 14px;
        padding: 0;
        /*height: 16px;*/
        /*line-height: 16px;*/
        height: 24px;
        line-height: 24px;
    }

    .search-submit-box {
        flex: 1;
    }

    .search-submit-box .search-submit {
        width: 100%;
        /*border: 1px solid #666666;*/
        border-radius: 5px;
    }

    .radio-box {
        padding: 0 4%;
    }

    .radio-box .van-radio {
        line-height: 25px;
    }

    .history {
        /*margin-top: 15px;*/
    }

    .history-title {
        line-height: 45px;
        padding: 0 4%;
        background: #F2F2F2;
        color: rgb(153, 153, 153);
    }

    .history-list {

    }

    .history-list .list-item {
        line-height: 48px;
        color: #6b6b6b;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
    }

    .go-to-list {
        position: relative;
        width: 90%;
        padding-left: 15%;
    }

    .go-to-del {
        position: relative;
        width: 10%;
    }

    .history-list .list-icon {
        position: absolute;
        top: 50%;
        left: 5%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 0;
    }

    .del-history {
        position: absolute !important;
        top: 50%;
        left: 0;
        width: 16px;
        height: 16px;
        margin: -7px 0 0 0;
    }

    .main-explore {
        position: relative;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        /*margin-bottom: 14px;*/
        padding-right: 4%;
    }

    .main-explore.buy-list-explore .explore-item {
        display: block;
        padding: 14px 0 0;
        margin-left: 4%;
        width: 46%;
        text-decoration: none;
        color: #000;
        /*margin-right: 8%;*/
        /*border-bottom: 1px solid #F2F2F2;*/
        /*border-right: 1px solid #F2F2F2;*/
    }

    /*最后一个child是div--加载loading*/
    /*.main-explore .explore-item.one:last-child, .main-explore .explore-item.two:last-child{*/
    /*border-bottom: none;*/
    /*}*/
    .main-explore .explore-item.one:nth-last-child(2), .main-explore .explore-item.two:nth-last-child(2) {
        border-bottom: none;
        margin-bottom: 14px;
    }

    .main-explore .explore-item.two:nth-last-child(3) {
        border-bottom: none;
        margin-bottom: 14px;
    }

    .main-explore .explore-item:nth-child(2n) {
        margin-right: 0;
        border-right: 0;
    }

    .main-explore .explore-item .explore-item-icon {
        width: 100%;
        /*height: 135px;*/
        /*margin: 0 auto 5px;*/
        /*border: 1px solid #eee;*/
        align-items: center;
        display: flex;
        background: #f0f0f0;
        position: relative;
        z-index: 0;
        height: 0;
        padding: 0 0 100%;
        overflow: hidden;
        border-radius: 6px;
    }

    .main-explore .explore-item .explore-item-icon::before {
        content: "Tolymoly";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        background: #f0f0f0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #c0bfbf;
        /*line-height: 135px;*/
        z-index: -1;
        margin-top: -12px;
    }

    .main-explore .explore-item > * {
        display: block;
        margin: 0 auto;
    }

    .main-explore .explore-item-icon img {
        /*max-width:100%;*/
        /*max-height:100%;*/
        /*display: block;*/
        /*margin: 0 auto;*/
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
    }

    .main-explore .explore-item-icon img.width-max {
        width: auto;
        left: 50%;
        right: auto;
        height: 100%;
        transform: translate(-50%);
    }

    .main-explore .explore-item-icon img.height-max {
        top: 50%;
        transform: translateY(-50%);
    }

    .main-explore .explore-item .explore-item-label {
        /*color: inherit;*/
        font-size: 14px;
        line-height: 160%;
        margin-top: 4px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        /*font-size: 12px;*/
        /*font-family: Bitter, sans-serif;*/
        color: #000;
    }

    .main-explore .explore-item .explore-item-label.price {
        /*color: #DB3743;*/
        /*font-size: 16px;*/
        /*font-weight: 600;*/
        font-size: 14px;
        color: #4c4c4c;
    }

    .main-explore .explore-item .explore-item-label.dates {
        color: #A1A1A1;
    }

    .no-more {
        border-top: 1px solid #F2F2F2;
        height: 50px;
        line-height: 50px;
        color: #909399;
        text-align: center;
    }

    .user-info-box {
        padding: 15px 4%;
        border-bottom: 1px solid #f2f2f2;
    }

    .user-info {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-left: 4.1em;
        min-height: 50px;
        line-height: 150%;
        justify-content: space-around;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .user-info i {
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
    }

    .user-info p.title {
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        padding: 0 4% 0 0;
        margin: 0;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .user-info p.infos {
        padding: 0 4% 0 0;
        margin: 0;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: rgb(102, 102, 102);
    }

    .user-info i img {
        width: 100%;
        display: block;
    }

    .info-right-box {
        display: flex;
    }

    .info-left {
        flex: 1;
    }

    /*新增样式*/
    .search-history, .search-history-item {
        padding: 10px 15px;
        color: #333;
        font-size: 14px;
        line-height: 24px;
        background-color: #F2F2F2;
        margin: 0;
    }

    .search-history-item {
        background-color: #fff;
        display: flex;
    }

    .search-history-item .clock {
        flex-basis: 14px;
        margin-top: 5px;
    }

    .search-history-item .content {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-history-item .close {
        flex-basis: 14px;
        margin-top: 5px;
    }

    .search-content {
        margin-left: 4%;
        display: inline-block;
        width: 85%;
    }
</style>
